<template>
  <div id="app" style="display:flex;height: 100%;overflow-x:hidden;">
      <app-header v-if="header_show" ></app-header>
      <div class="body" >
        <app-top v-if="top_show"></app-top>
        <router-view style="overflow-y:scroll;"/>
    </div>
  </div>
</template>

<script>
import Header from "./public/header";
import Top from "./public/top";
export default {
  name: "App",
  data() {
    return {
      header_show: true,
      top_show: true,
    };
  },
  components: {
    "app-header": Header,
    "app-top": Top,
  },
  created(){
    if(!localStorage.getItem('store_id') || localStorage.getItem('store_id') == 'undefined'){
      this.$router.push({ path: '/login' });
    }
    if(this.$route.fullPath == '/login'){
      this.header_show = false;
      this.top_show = false;
    }
  },
  watch: {
    $route(to, from) {
      if(!localStorage.getItem('store_id') || localStorage.getItem('store_id') == 'undefined'){
        this.$router.push({ path: '/login' });
      }
      if(to.fullPath == "/login"){
        this.header_show = false;
        this.top_show = false;
      } else {
        this.header_show = true;
        this.top_show = true;
      }
    },
  },
};
</script>

<style>
.body {
  display: flex;
  flex-direction: column;
 
  flex: 1;
overflow-x:hidden;

}
.el-aside {background: red; display: block; 
position: relative; overflow-y: scroll; 
background-color: #324157 !important; }

.form_select{
  width:98%;
  background:#e6e6e6;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  padding:10px 10px 10px 10px;
  align-items:center;
}
.form_select1{
  border:1px solid #d9d9d9;
  border-radius:10px;
  margin-left:2%;
  margin-top:20px;
  width:90%;
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding:10px 30px 10px 30px;
  align-items:center;
  flex-wrap:wrap;
}
.select_font{
  width:33%;
  font-size:12px !important;
}
.select_input1{
  width:200px !important;
  height:35px !important;
  line-height:35px !important;
  margin-top:10px !important;
  margin-left:10px;
}
.select_input{
  width:200px !important;
  height:35px !important;
  line-height:35px !important;
}
.select_option{
   width:200px !important;
    height:35px !important;
    line-height:35px !important;
}
.select_option1{
    width:150px !important;
    height:35px !important;
    line-height:35px !important;
    margin-left:10px;
}
.select_right{
  padding-right:40px;
}
.firm{
  position: fixed;
  z-index:99;
  width:40%;
  height:240px;
  left:30%;
  top:20%;
  background:#dddddd;
  border-radius:30px;
}
.firm_title{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  height:60px;
  line-height:60px;
  padding:0 20px 0 20px;
  align-items:center;
}
.firm_footer{
  margin-top:20px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  padding:0 100px 0 100px;
}
</style>
